{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh" content="10">

    <title>Title</title>
    <link rel="stylesheet" href="{% static "static/my.css" %}">
    <link rel="stylesheet" href="{% static "static/bootstrap.min.css" %}">


    <link rel="stylesheet" href="{% static "static/factory_venu_style.css" %}">
<style type="text/css">
    .div1 {
        width: 100%;
        height: 100%;
        top: 100px;
        display: flex;
        /*!*flex-direction: column;*!可写可不写*/
        justify-content: center;
        {#align-items: center;#}
        position: relative;

    }

    .div2 {
        margin-right: 180px;
        margin-top: 150px;
        height: 800px;
        width: 1000px;





    }
    .one{
        position: absolute;
        margin-top: 150px;
        left: 200px;
        height: 250px;
        width: 150px;

    }
    .two{
        position: absolute;
        top: 500px;
        left: 200px;
        height: 100px;
        width: 150px;

    }
    .three{
        position: absolute;
         top: 100px;
        right: 200px;
        height: 100px;
        width: 150px;
    }

    .four{
        position: absolute;
         top: 400px;
        right: 200px;
        height: 100px;
        width: 150px;
    }


    .five{
    position: absolute;
         top: 50px;
        left: 600px;
        height: 100px;
        width: 150px;
    }
    .font{
        color: #e2e6ea;

    }

    .button_size{
        width: 100px;
        height: 40px;
        border-radius: 15px;
    }

    {#图标闪烁#}


</style>
</head>
<body style="background-color: #262626">

<div style="position: absolute;top: 20px;width:100%;height:80px;text-align: center;">
    <h1 style="color: #dcab25;font-size: 50px"><strong>电力监控Electric</strong></h1>
</div>


{#头部导航#}
<div style="position: absolute;top: 90vh;width:100%;height:80px;z-index: 99999">
<ul class="nav justify-content-center nav-pills">
     <li class="nav-item">
    <a class="nav-link " href="/big_data_view/"> <button class="btn btn-warning button_size" type="button">首页</button>
   </a>
  </li>
  <li class="nav-item">
    <a class="nav-link " href="/factory_venu/"> <button class="btn btn-warning button_size" type="button">生产环境</button>
   </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/machine_data/"> <button class="btn btn-sm btn-warning button_size" type="button">机台数据</button></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/power_monitor/"><button class="btn btn-sm btn-warning button_size" type="button">电力监控</button></a>
  </li>
  <li class="nav-item">
    <a class="nav-link " href="/video_control/" ><button class="btn btn-sm btn-warning button_size" type="button">视频监控</button></a>
  </li>
     <li class="nav-item">
    <a class="nav-link " href="http://10.130.1.16:8001/admin/" ><button class="btn btn-sm btn-warning button_size" type="button">生产管理</button></a>
  </li>
</ul>
</div>
{#头部导航#}



<div class="div1">

    <div class="one">
<div class="row text_div">
{#  <div class="col-sm-2 text_div" >#}
{#      <img  class="circle_lable1" src="{% static "img/img_factory_venu/circle1.png" %}">#}
      <div class="loader-disc-bouncer col-sm-2" ></div>
{#  </div>#}
  <div class="col-sm-9 text_div" ><h2 class="font" style="margin-top: 20%;font-weight: bolder">车间</h2></div>
</div>

        <p class="font">温度：{{ factory_venu_data_all.1 }}</p>
        <p class="font">湿度：{{ factory_venu_data_all.0 }}</p>
        <p class="font">粉尘：223</p>
    </div>




        <div class="two">
<div class="row text_div">
{#  <div class="col-sm-2 text_div" >#}
{#      <img  class="circle_lable1" src="{% static "img/img_factory_venu/circle1.png" %}">#}
      <div class="loader-disc-bouncer1 col-sm-2 "  ></div>
{#  </div>#}
  <div class="col-sm-9 text_div " ><h2 class="font" style="margin-top: 20%;font-weight: bolder">车间</h2></div>
</div>

        <p class="font">温度：30</p>
        <p class="font">湿度：63</p>
        <p class="font">粉尘：223</p>
    </div>




      <div class="three">
<div class="row text_div">
{#  <div class="col-sm-2 text_div" >#}
{#      <img  class="circle_lable1" src="{% static "img/img_factory_venu/circle1.png" %}">#}
      <div class="loader-disc-bouncer2 col-sm-2 "  ></div>
{#  </div>#}
  <div class="col-sm-9 text_div " ><h2 class="font" style="margin-top: 20%;font-weight: bolder">车间</h2></div>
</div>

        <p class="font">温度：30</p>
        <p class="font">湿度：63</p>
        <p class="font">粉尘：223</p>
    </div>



      <div class="four">
<div class="row text_div">
      <div class="loader-disc-bouncer3 col-sm-2 "  ></div>
  <div class="col-sm-9 text_div " ><h2 class="font" style="margin-top: 20%;font-weight: bolder">车间</h2></div>
</div>

        <p class="font">温度：30</p>
        <p class="font">湿度：63</p>
        <p class="font">粉尘：223</p>
    </div>


         <div class="five">
<div class="row text_div">
      <div class="loader-disc-bouncer4 col-sm-2 "  ></div>
  <div class="col-sm-9 text_div " ><h2 class="font" style="margin-top: 20%;font-weight: bolder">车间</h2></div>
</div>

        <p class="font">温度：30</p>
        <p class="font">湿度：63</p>
        <p class="font">粉尘：223</p>
    </div>

    <div class="circle_lable1">
{#        <img class="circle_lable1" src="{% static  "img/录音.png" %}"/>#}
{#         <img class="circle_lable2" src="{% static  "img/录音.png" %}"/>#}
    </div>
</div>

    <div style="z-index: 999;position: absolute;width: 70%;height: 70%;left: 20%;top: 30%">
        <img style="width: 90%;height: 80%" src="{% static "img/img_factory_venu/factory_venu_3d.png" %}">
    </div>





{##}
{#选项导航#}



 <!-- All Js Files -->
      <script src="{% static "static/all_big_data_view.js" %}"></script>
      <script src="{% static "static/custom_big_data_view.js" %}"></script>
</body>
</html>